<template>
  <div id="orders" :class="styleTypeClass" :style="{width:width,height:'100%'}">
    <!-- 默认样式-->
    <template>
<!--      <div class="title">-->
<!--        <div class="d-flex pt-2 pl-2">-->
<!--          <span class="title-icon"></span>-->
<!--          <span class="fs-xl text mx-2">订单统计</span>-->
<!--        </div>-->
<!--      </div>-->
      <div class="mt-3" style="height:95%">
        <EchartsIndex :options="options"/>
      </div>
    </template>
  </div>
</template>

<script>
import mixin from '../mixin/index'
import mixinEcharts  from '../mixin/echarts'
export default {
  name: "Orders",
  mixins: [mixin,mixinEcharts],
  components: {},
  data(){
    return {
      options:{
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          top:'10%',
          data: ['口罩领用量', '环保袋领用量', '抽纸领用量',]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          top:70,
          left: '3%',
          right: '4%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.times,
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '口罩领用量',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.masks
          },
          {
            name: '环保袋领用量',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.bags
          },
          {
            name: '抽纸领用量',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.chouzhis
          },
        ]
      }
    }
  },
  props:{
    times:{
      type: Array,
      default: ()=>['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    masks:{
      type: Array,
      default: ()=>[120, 132, 101, 134, 90, 230, 210]
    },
    bags:{
      type: Array,
      default: ()=>[220, 182, 191, 234, 290, 330, 310]
    },
    chouzhis:{
      type: Array,
      default: ()=>[150, 232, 201, 154, 190, 330, 410]
    },
  },
  computed:{},
  watch:{
    times() {
      this.options.xAxis[0].data = this.times;
    },
    masks() {
      this.options.series[0].data = this.masks;
    },
    bags() {
      this.options.series[1].data = this.bags;
    },
    chouzhis() {
      this.options.series[2].data = this.chouzhis;
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/datav/infoPlatform.scss';
</style>
